<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时重启</title>
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/elementui.css">
    <script src="static/js/index.js"></script>
    <script src="static/js/clipboard.min.js"></script>
</head>
<style>
    @font-face {
        font-family: element-icons;
        src: url(static/font/element-icons.woff) format('woff'), url(static/font/element-icons.ttf) format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    body {
        padding: 60px 30px;
    }

    .wrap {
        /* padding: ; */
    }

    .title {
        border-bottom: 1px solid #cecece;
        padding-bottom: 20px;
    }

    .system_time,
    .system_operate {
        display: flex;
        align-items: center;
        margin: 20px 0;
    }

    .time_name {
        font-size: 18px;
        font-weight: bold;
        margin-right: 24px;
    }

    .box_wrap {
        position: relative;
        display: flex;
        align-items: center;

        input[type='checkbox'] {
            appearance: none;
            width: 64px;
            height: 24px;
            margin: 0;
            position: position;
            border-radius: 16px;
            cursor: pointer;
            border: none;
            position: absolute;
            display: flex;
            align-items: center;
        }

        input[type="checkbox"]:before {
            content: "";
            z-index: 10;
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            left: 4px;
            top: 2px;
            border-radius: 50%;
            transition: left cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
        }

        input[type="checkbox"]:checked:before {
            content: "";
            position: absolute;
            z-index: 10;
            width: 20px;
            height: 20px;
            background: white;
            left: calc(100% - 24px);
            top: 2px;
            border-radius: 50%;
            transition: left cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
        }

        label {
            display: inline-block;
            width: 64px;
            height: 24px;
            border-radius: 16px;
            background: #9c9c9c;
            border: .5px solid rgba(117, 117, 117, 0.31);
            box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0 -3px 4px rgba(0, 0, 0, 0.15);
            padding: 0;
        }

        input[type="checkbox"]:checked+label {
            background: #46a35d;
        }
    }

    .time_reset {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex: 1;

        input[type="checkbox"] {
            margin-right: 2px;
        }
    }

    input[type="time"] {
        width: 110px;
        font-size: 16px;
    }

    .reset_item {
        margin-right: 10px;
    }

    .confirm_button {
        margin-left: 96px;
        width: 90px;
        background: #46a35d;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        color: #fff;
        cursor: pointer;
    }

    .el-input__inner {
        width: 182px;
    }

    /* .el-input__icon.el-icon-time {
        display: none;
    } */
</style>

<body>
    <div id="app">
        <div class="wrap">

            <div class="title">
                定时重启
            </div>

            <div class="system_time">
                <div class="time_name">系统时间</div>
                <div id="time_text"></div>
            </div>

            <div class="system_operate">
                <div class="time_name">启用重启</div>
                <div class="box_wrap">
                    <el-switch
                        v-model="checked"
                        active-color="#46a35d"
                        inactive-color="#9c9c9c">
                    </el-switch>
                </div>
            </div>

            <div class="system_time">
                <div class="time_name">重启时间</div>
                <div class="time_reset">
                    <el-time-picker size="medium" v-model="value" :picker-options="{
                              selectableRange: '00:00:00 - 23:59:00'
                            }" format="HH:mm" placeholder="选择时间">
                    </el-time-picker>
                </div>
            </div>

            <div class="system_time">
                <div class="time_name">重启日期 </div>
                <div class="time_reset">
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="all" @change="toggleAll">
                        <label for="all">全选</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="1" value="1">
                        <label for="1">周一</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="2" value="2">
                        <label for="2">周二</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="3" value="3">
                        <label for="3">周三</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="4" value="4">
                        <label for="4">周四</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="5" value="5">
                        <label for="5">周五</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="6" value="6">
                        <label for="6">周六</label>
                    </div>
                    <div class="reset_item">
                        <input type="checkbox" name="date" id="7" value="0">
                        <label for="7">周日</label>
                    </div>
                </div>
            </div>

            <div class="confirm_button" @click="submitFunction">
                保存
            </div>

        </div>
    </div>


    <script src="static/js/vue.min.js"></script>
    <script src="static/js/elementui.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    // 绑定重启时间
                    value: '',
                    checked: false,
                }
            },
            // 每次页面加载完执行的回调
            mounted() {
                fetch('http://192.168.1.1:6789/api/get/first-reboot') // 替换为你的 URL
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应失败');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            this.checked = true
                            const job = data.job;

                            // 使用正则表达式分解 job 字符串
                            const [minute, hour, , , days] = job.split(' ');

                            // 结果
                            // 结果
                            // 获取当前日期（例如你可以使用这个日期）
                            const currentDate = new Date(); // 获取当前日期
                            const year = currentDate.getFullYear(); // 当前年份
                            const month = currentDate.getMonth(); // 当前月份（0 - 11）
                            const day = currentDate.getDate(); // 当前日期

                            // 设置时间
                            // 注意(month + 1)是因为 JavaScript 的月份是从 0 开始的
                            const targetDate = new Date(year, month, day, hour, minute, 0);

                            // 将 in your Vue data
                            this.value = targetDate; // 设置为日期对象
                            const extractedDays = days.split(','); // ['2', '3', '7'] 提取的日期

                            // 获取所有的 checkbox
                            const checkboxes = document.querySelectorAll('input[name="date"]');

                            // 遍历所有的 checkbox
                            checkboxes.forEach(checkbox => {
                                // 如果 checkbox 的 value 在 extractedDays 中，就选中它
                                if (extractedDays.includes(checkbox.value)) {
                                    checkbox.checked = true;
                                }
                            });
                        }

                    })
                    .catch(error => {

                    });
                this.getTime();
                setInterval(this.getTime, 1000); // Fix: Pass the method reference without parentheses
            },
            methods: {
                getTime() {
                    var element = document.getElementById('time_text');
                    fetch('http://192.168.1.1:6789/api/get/first-reboot') // 替换为你的 URL
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('网络响应失败');
                            }
                            return response.json();
                        })
                        .then(data => {
                         
                            element.innerText = data.time; // 确保 `element` 已定义并可用
                        })
                        .catch(error => {
                            var date = new Date();
                            var year = date.getFullYear();
                            var month = date.getMonth() + 1;
                            var day = date.getDate();
                            var hour = date.getHours();
                            var minute = date.getMinutes();
                            var second = date.getSeconds();


                            element.innerText = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
                        });

                },
                submitFunction() {
                    if (this.checked) {
                        const selectedTime = this.value;
                        if (selectedTime) {
                            const time = new Date(selectedTime);

                            // 检查时间是否有效
                            if (!isNaN(time.getTime())) {
                                const hour = time.getHours().toString().padStart(2, '0');
                                const minute = time.getMinutes().toString().padStart(2, '0');
                                const selections = [];
                                const checkboxes = document.querySelectorAll('input[type="checkbox"][name="date"]:not(#all)');

                                checkboxes.forEach(checkbox => {
                                    if (checkbox.checked) {
                                        selections.push(checkbox.value);
                                    }
                                });

                                // 检查是否有选择
                                if (selections.length === 0) {
                                    this.$message.error('未选择任何日期！')
                                } else {
                                    const days = selections.join(','); // 构建天数字符串
                                    fetch(`http://192.168.1.1:6789/api/set/reboot?day=${days}&hour=${hour}&minute=${minute}`)
                                        .then(response => {
                                            if (!response.ok) {
                                                this.$message.error('网络响应失败')
                                                throw new Error('网络响应失败');
                                            }
                                            return response.json();
                                        })
                                        .then(data => {
                                            this.$message({
                                                message: '设置成功',
                                                type: 'success'
                                            });
                                        })
                                        .catch(error => {
                                            console.error(error);
                                        });

                                }

                            } else {
                                this.$message.error('选择时间无效')
                            }
                        } else {
                            this.$message.error('未选择任何时间')
                        }

                    } else {
                        fetch('http://192.168.1.1:6789/api/claen/cron') // Replace with your URL
                            .then(response => {
                                if (!response.ok) {
                                    this.$message.error('网络响应失败')
                                    throw new Error('网络响应失败');
                                }
                                return response.json();
                            })
                            .then(data => {
                                this.$message({
                                    message: '清除成功',
                                    type: 'success'
                                });
                            })
                            .catch(error => {
                                console.error(error);
                            });
                    }
                },
                toggleAll() {
                    const allCheckbox = document.getElementById('all');
                    const checkboxes = document.querySelectorAll('input[name="date"]');

                    checkboxes.forEach(checkbox => {
                        checkbox.checked = allCheckbox.checked;
                    });
                }
            }
        })
    </script>
</body>

</html>